import React from 'react'
import { useLoaderData, useNavigate } from 'react-router-dom'
import styles from '../component/css/Items.module.css'
import { Button } from 'antd-mobile';

function Items() {
  let loaderdata=useLoaderData()
  console.log(loaderdata.info);
  let nav=useNavigate()
  return (
    <div className={styles.dbox}>
      <span><span style={{background:'orange'}}>中转方案</span>全程耗时{loaderdata.info.data.timeTaken}</span>
      <div className={styles.dtop}>
        <span>{loaderdata.info.data.startTime}</span>
        <span>{loaderdata.info.data.endTime}</span>
      </div>
      <div className={styles.dcenter}>
      <span>{loaderdata.info.data.startStation}</span>
      <span>{loaderdata.info.data.endStation}</span>
      </div>

      <div className={styles.tunder}>
        <div>
          <p>二等座</p>
          <p>￥{loaderdata.info.data.ssoftSeat.price}/{loaderdata.info.data.ssoftSeat.ticketNum}</p>
        </div>
        <div>
        <p>一等座</p>
        <p>￥{loaderdata.info.data.fsoftSeat.price}/{loaderdata.info.data.fsoftSeat.ticketNum}</p>
        </div>
        <div>
        <p>商务座</p>
        <p>￥{loaderdata.info.data.businessSeat.price}/{loaderdata.info.data.businessSeat.ticketNum}</p>
        </div>
      </div>

      <div className={styles.goalign}>
        <span className={styles.a1}>￥{(loaderdata.info.data.fsoftSeat.price)*3}</span>
      <Button onClick={()=>nav('/order')}>订</Button>
      </div>
    </div>
  )
}

export default Items
